<template>
  <div class="checkout-container">
    <van-nav-bar title="确认订单" left-arrow @click-left="onBack" />
    
    <van-address-list
      v-model="selectedAddressId"
      :list="addressList"
      default-tag-text="默认"
      @add="onAddAddress"
    />
    
    <van-cell-group inset class="goods-card">
      <van-cell title="商品清单">
        <template #right-icon>
          <span class="goods-count">共{{ cartStore.totalCount }}件</span>
        </template>
      </van-cell>
      <van-card
        v-for="item in cartStore.items"
        :key="item.id"
        :price="item.price"
        :title="item.name"
        thumb="/static/2.png"
        :num="item.quantity"
      >
        <template #tags>
          <van-tag plain type="danger" v-if="item.color">{{ item.color }}</van-tag>
          <van-tag plain type="danger" v-if="item.type">{{ item.type }}</van-tag>
        </template>
      </van-card>
    </van-cell-group>
    
    <van-submit-bar
      :price="cartStore.totalPrice * 100"
      button-text="提交订单"
      @submit="onSubmit"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useCartStore } from '../stores/cart.js'
import { showToast } from 'vant'

const router = useRouter()
const cartStore = useCartStore()
const selectedAddressId = ref('1')

// 模拟地址数据
const addressList = ref([
  {
    id: '1',
    name: '张三',
    tel: '13000000000',
    address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
    isDefault: true
  }
])

const onBack = () => {
  router.back()
}

const onAddAddress = () => {
  showToast('新增地址功能开发中')
}

const onSubmit = () => {
  if (!selectedAddressId.value) {
    showToast('请选择收货地址')
    return
  }
  
  showToast('订单提交成功')
  cartStore.clearCart()
  router.push('/home')
}
</script>

<style scoped>
.checkout-container {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 50px;
}
.goods-card {
  margin: 10px;
}
.goods-count {
  color: #999;
  font-size: 14px;
}
</style> 